<!--
 描述: 司南排名图
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">淤泥无机物占比以及用水占比图</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="pd-main">
                        <div id="chart1" class="chart-1">
                            <div class="compass">
                                <div class="compass-bg-1"></div>
                                <div class="compass-bg-2"></div>
                                <div class="compass-bg-3"></div>
                                <div class="compass-bg-4"></div>
                                <div class="compass-bg-5"></div>
                                <div class="compass-bg-6"></div>
                                <div class="compass-bg-7"></div>

                                <div class="compass-bg-c-1"></div>
                                <div class="compass-bg-c-2"></div>
                                <div class="compass-bg-c-3"></div>
                                <div class="compass-bg-c-4"></div>

                                <div class="compass-text" :class="[`compass-text-${index + 1}`, { show: number == index }]"
                                    v-for="(item, index) in arr" :key="index">
                                    <span>无机物占比：{{ item.itemNum }} %</span>
                                    <span>最小用水量：{{ item.dataItem }} mL</span>
                                    <span>用水量量最大：{{ item.dataSize }} mL</span>
                                </div>
                                <div class="compass-number">
                                    <div :title="`${index + 1}`"
                                        :class="[`rank-${index + 1}`, { szscale: number == index }]"
                                        v-for="(item, index) in arr" :key="index">
                                        <span>{{ item.workUnit }}</span>
                                    </div>
                                </div>

                                <div class="line-sx">
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "sinan",
    data() {
        return {
            timer: null,
            number: null,
            arr: [{
                id: 1,
                itemNum: 36.23,
                dataItem: 550,
                dataSize: 573,
                workUnit: '25立方'
            }, {
                id: 2,
                itemNum: 35.2,
                dataItem: 460,
                dataSize: 492,
                workUnit: '19立方'
            }, {
                id: 3,
                itemNum: 29.86,
                dataItem: 420,
                dataSize: 436,
                workUnit: '17立方'
            }, {
                id: 4,
                itemNum: 27.83,
                dataItem: 334,
                dataSize: 362,
                workUnit: '12立方'
            }, {
                id: 5,
                itemNum: 16.73,
                dataItem: 242,
                dataSize: 250,
                workUnit: '8立方'
            }, {
                id: 6,
                itemNum: 15,
                dataItem: 200,
                dataSize: 220,
                workUnit: '5立方'
            }]
        }
    },
    mounted() {
        setTimeout(() => {
            this.number = 0;
            this.initData();
        }, 4000)
    },
    methods: {
        initData() {
            this.number = this.number == this.arr.length ? 0 : this.number;
            this.timer = setTimeout(() => {
                this.number++;
                this.initData();
            }, 5000)
        }
    },
    beforeDestroy() {
        clearTimeout(this.timer);
    }
};
</script>

<style lang="scss" scoped>
.sn-container {
    left: 50px;
    top: 110px;

    .pd-main {
        position: absolute;
        height: 100%;
        width: 100%;

        [class^=chart] {
            position: absolute;
            -webkit-transform-origin: left top;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            -o-transform-origin: left top;
            transform-origin: left top;
        }

        .chart-1 {
            width: 500px;
            height: 410px;
            top: 55%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .compass {
            width: 100%;
            height: 100%;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);

            [class^=compass-bg-] {
                position: absolute;
                bottom: 0;
            }

            %compass-bg {
                position: absolute;
                bottom: 0px;
                left: 50%;
                -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
                -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
                transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
            }

            .compass-bg-1 {
                @extend %compass-bg;
                margin-left: -250px;
                bottom: -200px;
                width: 500px;
                height: 500px;
                background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                display: none;
            }

            .compass-bg-2 {
                @extend %compass-bg;
                margin-left: -220px;
                bottom: -170px;
                width: 440px;
                height: 440px;
                background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                display: none;
            }

            .compass-bg-3 {
                @extend %compass-bg;
                margin-left: -190px;
                bottom: -140px;
                width: 380px;
                height: 380px;
                background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
                background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
                background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
                background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
            }

            .compass-bg-4 {
                @extend %compass-bg;
                margin-left: -160px;
                bottom: -110px;
                width: 320px;
                height: 320px;
                background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
                background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
                background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
                background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
            }

            .compass-bg-5 {
                @extend %compass-bg;
                margin-left: -130px;
                bottom: -80px;
                width: 260px;
                height: 260px;
                -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
                -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
                box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
            }

            .compass-bg-6 {
                @extend %compass-bg;
                margin-left: -100px;
                bottom: -50px;
                width: 200px;
                height: 200px;
                background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                display: none;
            }

            .compass-bg-7 {
                @extend %compass-bg;
                margin-left: -70px;
                bottom: -20px;
                width: 140px;
                height: 140px;
                background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                -webkit-animation: bgshadow 3s linear infinite;
                -moz-animation: bgshadow 3s linear infinite;
                -o-animation: bgshadow 3s linear infinite;
                animation: bgshadow 3s linear infinite;
            }

            .compass-bg-c-1 {
                width: 100%;
                height: 100%;
                background: url(../../assets/img/chart1/compass-bg-1.png) no-repeat 50% 345px;
            }

            .compass-bg-c-2 {
                width: 100%;
                height: 100%;
                background: url(../../assets/img/chart1/compass-bg-2.png) no-repeat 65% 146px;
                opacity: 0.8;
                -webkit-animation: fadebg 3s linear infinite;
                -moz-animation: fadebg 3s linear infinite;
                -o-animation: fadebg 3s linear infinite;
                animation: fadebg 3s linear infinite;
            }

            .compass-bg-c-3 {
                width: 100%;
                height: 100%;
                background: url(../../assets/img/chart1/compass-bg-3.png) no-repeat 50% 227px;
            }

            .compass-bg-c-4 {
                width: 100%;
                height: 100%;
                background: url(../../assets/img/chart1/compass-bg-4.png) no-repeat 50% 63px;
                -webkit-animation: numberfade 5s linear infinite;
                -moz-animation: numberfade 5s linear infinite;
                -o-animation: numberfade 5s linear infinite;
                animation: numberfade 5s linear infinite;
            }

            .compass-text {
                position: absolute;
                overflow: hidden;
                left: 50%;
                margin-left: -60px;
                font-size: 12px;
                background-color: rgba(0, 71, 157, 0.4);
                padding: 5px 10px;
                color: #0b5f38;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                line-height: 1.5;
                /*-webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);*/
                display: none;

                &.compass-text-1 {
                    top: -77px;
                    left: 48px;
                }

                &.compass-text-2 {
                    top: -35px;
                    left: 152px;
                }

                &.compass-text-3 {
                    top: 5px;
                    left: 250px;
                }

                &.compass-text-4 {
                    top: 49px;
                    left: 350px;
                }

                &.compass-text-5 {
                    top: 88px;
                    left: 450px;
                }

                &.compass-text-6 {
                    color: #d57a31;
                    bottom: -945px;
                    -webkit-animation-delay: 25s;
                    -moz-animation-delay: 25s;
                    -o-animation-delay: 25s;
                    animation-delay: 25s;
                }

                &.compass-text-7 {
                    color: #d57a31;
                    bottom: -1150px;
                    -webkit-animation-delay: 30s;
                    -moz-animation-delay: 30s;
                    -o-animation-delay: 30s;
                    animation-delay: 30s;
                }

                %span-nth-child {
                    margin-top: 0px;
                }

                span {
                    display: block;

                    &:nth-child(1) {
                        @extend %span-nth-child;
                    }

                    &:nth-child(2) {
                        @extend %span-nth-child;
                    }

                    &:nth-child(3) {
                        @extend %span-nth-child;
                    }
                }

                &.show {
                    display: block;
                }
            }

            .compass-number {
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: hidden;
                bottom: 50px;

                >.szscale {
                    -webkit-transform: scale(1.2);
                    -moz-transform: scale(1.2);
                    -ms-transform: scale(1.2);
                    -o-transform: scale(1.2);
                    transform: scale(1.2);
                    -webkit-transform-origin: center bottom;
                    -moz-transform-origin: center bottom;
                    -ms-transform-origin: center bottom;
                    -o-transform-origin: center bottom;
                    transform-origin: center bottom;
                }

                >div {
                    position: absolute;
                    bottom: 0;
                    width: 55px;
                    height: 0;
                    -webkit-animation: sz 1s linear;
                    -moz-animation: sz 1s linear;
                    -o-animation: sz 1s linear;
                    animation: sz 1s linear;
                    -webkit-animation-fill-mode: forwards;
                    -moz-animation-fill-mode: forwards;
                    -o-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                    -webkit-transition: 1s;
                    -o-transition: 1s;
                    -moz-transition: 1s;
                    transition: 1s;

                    &:nth-child(1) {
                        left: 5%;
                        color: #ff9232;
                        -webkit-animation-delay: 0s;
                        -moz-animation-delay: 0s;
                        -o-animation-delay: 0s;
                        animation-delay: 0s;

                        &:after {
                            -webkit-animation-delay: 0s;
                            -moz-animation-delay: 0s;
                            -o-animation-delay: 0s;
                            animation-delay: 0s;
                        }
                    }

                    &:nth-child(2) {
                        left: 25%;
                        color: #d5c245;
                        -webkit-animation-delay: 0.2s;
                        -moz-animation-delay: 0.2s;
                        -o-animation-delay: 0.2s;
                        animation-delay: 0.2s;
                        bottom: -10%;

                        &:after {
                            -webkit-animation-delay: 2.85s;
                            -moz-animation-delay: 2.85s;
                            -o-animation-delay: 2.85s;
                            animation-delay: 2.85s;
                        }
                    }

                    &:nth-child(3) {
                        left: 45%;
                        color: #01a455;
                        -webkit-animation-delay: 0.4s;
                        -moz-animation-delay: 0.4s;
                        -o-animation-delay: 0.4s;
                        animation-delay: 0.4s;
                        bottom: -20%;

                        &:after {
                            -webkit-animation-delay: 5.7s;
                            -moz-animation-delay: 5.7s;
                            -o-animation-delay: 5.7s;
                            animation-delay: 5.7s;
                        }
                    }

                    &:nth-child(4) {
                        left: 65%;
                        color: #85adfb;
                        -webkit-animation-delay: 0.6s;
                        -moz-animation-delay: 0.6s;
                        -o-animation-delay: 0.6s;
                        animation-delay: 0.6s;
                        bottom: -30%;

                        &:after {
                            -webkit-animation-delay: 8.55s;
                            -moz-animation-delay: 8.55s;
                            -o-animation-delay: 8.55s;
                            animation-delay: 8.55s;
                        }
                    }

                    &:nth-child(5) {
                        left: 85%;
                        color: #c36885;
                        -webkit-animation-delay: 0.8s;
                        -moz-animation-delay: 0.8s;
                        -o-animation-delay: 0.8s;
                        animation-delay: 0.8s;
                        bottom: -40%;

                        &:after {
                            -webkit-animation-delay: 11.4s;
                            -moz-animation-delay: 11.4s;
                            -o-animation-delay: 11.4s;
                            animation-delay: 11.4s;
                        }
                    }

                    &:nth-child(6) {
                        left: 75%;
                        color: #f674a0;
                        -webkit-animation-delay: 1s;
                        -moz-animation-delay: 1s;
                        -o-animation-delay: 1s;
                        animation-delay: 1s;
                        bottom: -50%;

                        &:after {
                            -webkit-animation-delay: 14.25s;
                            -moz-animation-delay: 14.25s;
                            -o-animation-delay: 14.25s;
                            animation-delay: 14.25s;
                        }
                    }

                    &:nth-child(7) {
                        left: 87.5%;
                        color: #275fcc;
                        -webkit-animation-delay: 1.2s;
                        -moz-animation-delay: 1.2s;
                        -o-animation-delay: 1.2s;
                        animation-delay: 1.2s;
                        bottom: -60%;

                        &:after {
                            -webkit-animation-delay: 17.1s;
                            -moz-animation-delay: 17.1s;
                            -o-animation-delay: 17.1s;
                            animation-delay: 17.1s;
                        }
                    }

                    span {
                        display: block;
                        width: 55px;
                        height: 55px;
                        line-height: 55px;
                        text-align: center;
                        /*padding-bottom: 55px;*/
                        -webkit-box-shadow: inset 0 0 15px currentColor;
                        -moz-box-shadow: inset 0 0 15px currentColor;
                        box-shadow: inset 0 0 15px currentColor;
                        -webkit-border-radius: 100%;
                        -moz-border-radius: 100%;
                        border-radius: 100%;
                    }

                    &:before {
                        content: "";
                        position: absolute;
                        height: 100%;
                        border-left: 1px dashed currentColor;
                        height: 500px;
                        top: 55px;
                        left: 50%;
                        margin-left: -1px;
                    }

                    &:after {
                        content: "NO." attr(title);
                        position: absolute;
                        display: inline-block;
                        top: -20px;
                        width: 100%;
                        font-family: "DIGITALDREAMFAT";
                        text-align: center;
                    }
                }
            }

            .line-sx {
                >div {
                    &:nth-child(2) {
                        height: 90%;
                        -webkit-animation-duration: 2s;
                        -moz-animation-duration: 2s;
                        -o-animation-duration: 2s;
                        animation-duration: 2s;
                        -webkit-animation-delay: 1.5s;
                        -moz-animation-delay: 1.5s;
                        -o-animation-delay: 1.5s;
                        animation-delay: 1.5s;
                        bottom: 0;
                        left: 51px;
                    }

                    &:nth-child(3) {
                        height: 100%;
                        -webkit-animation-duration: 3s;
                        -moz-animation-duration: 3s;
                        -o-animation-duration: 3s;
                        animation-duration: 3s;
                        -webkit-animation-delay: 0s;
                        -moz-animation-delay: 0s;
                        -o-animation-delay: 0s;
                        animation-delay: 0s;
                        bottom: 32px;
                        left: 89px;
                    }

                    &:nth-child(4) {
                        height: 100%;
                        -webkit-animation-duration: 2.5s;
                        -moz-animation-duration: 2.5s;
                        -o-animation-duration: 2.5s;
                        animation-duration: 2.5s;
                        -webkit-animation-delay: 1s;
                        -moz-animation-delay: 1s;
                        -o-animation-delay: 1s;
                        animation-delay: 1s;
                        bottom: 3px;
                        left: 179px;
                        -webkit-filter: hue-rotate(180deg);
                        filter: hue-rotate(180deg);
                    }

                    &:nth-child(5) {
                        height: 90%;
                        -webkit-animation-duration: 2s;
                        -moz-animation-duration: 2s;
                        -o-animation-duration: 2s;
                        animation-duration: 2s;
                        -webkit-animation-delay: 2s;
                        -moz-animation-delay: 2s;
                        -o-animation-delay: 2s;
                        animation-delay: 2s;
                        bottom: 42px;
                        left: 229px;
                    }

                    &:nth-child(6) {
                        height: 100%;
                        -webkit-animation-duration: 2.5s;
                        -moz-animation-duration: 2.5s;
                        -o-animation-duration: 2.5s;
                        animation-duration: 2.5s;
                        -webkit-animation-delay: 0.5s;
                        -moz-animation-delay: 0.5s;
                        -o-animation-delay: 0.5s;
                        animation-delay: 0.5s;
                        bottom: 11px;
                        right: 48px;
                    }

                    &:nth-child(7) {
                        height: 90%;
                        -webkit-animation-duration: 3s;
                        -moz-animation-duration: 3s;
                        -o-animation-duration: 3s;
                        animation-duration: 3s;
                        -webkit-animation-delay: 2.5s;
                        -moz-animation-delay: 2.5s;
                        -o-animation-delay: 2.5s;
                        animation-delay: 2.5s;
                        bottom: -22px;
                        right: 174px;
                        -webkit-filter: hue-rotate(180deg);
                        filter: hue-rotate(180deg);
                    }

                    &:nth-child(8) {
                        height: 90%;
                        -webkit-animation-duration: 3s;
                        -moz-animation-duration: 3s;
                        -o-animation-duration: 3s;
                        animation-duration: 3s;
                        -webkit-animation-delay: 1.5s;
                        -moz-animation-delay: 1.5s;
                        -o-animation-delay: 1.5s;
                        animation-delay: 1.5s;
                        bottom: -22px;
                        right: 100px;
                    }

                    &:nth-child(9) {
                        height: 100%;
                        -webkit-animation-duration: 2.5s;
                        -moz-animation-duration: 2.5s;
                        -o-animation-duration: 2.5s;
                        animation-duration: 2.5s;
                        -webkit-animation-delay: 2s;
                        -moz-animation-delay: 2s;
                        -o-animation-delay: 2s;
                        animation-delay: 2s;
                        bottom: -10px;
                        right: 220px;
                    }

                    &:nth-child(10) {
                        height: 95%;
                        -webkit-animation-duration: 2s;
                        -moz-animation-duration: 2s;
                        -o-animation-duration: 2s;
                        animation-duration: 2s;
                        -webkit-animation-delay: 1s;
                        -moz-animation-delay: 1s;
                        -o-animation-delay: 1s;
                        animation-delay: 1s;
                        bottom: -41px;
                        right: 182px;
                    }
                }

                .line-fs {
                    width: 14px;
                    height: 100%;
                    background: url(../../assets/img/chart1/line-fs.png) no-repeat;
                    background-position: 50% 150%;
                    position: absolute;
                    z-index: -1;
                    -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                    -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                    -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                    animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                }
            }

        }

    }
}


@-webkit-keyframes fs {
    0% {
        background-position: 50% 150%;
    }

    50% {
        background-position: 50% -132%;
    }

    100% {
        background-position: 50% -264%;
        opacity: 0;
    }
}

@-moz-keyframes fs {
    0% {
        background-position: 50% 150%;
    }

    50% {
        background-position: 50% -132%;
    }

    100% {
        background-position: 50% -264%;
        opacity: 0;
    }
}

@-o-keyframes fs {
    0% {
        background-position: 50% 150%;
    }

    50% {
        background-position: 50% -132%;
    }

    100% {
        background-position: 50% -264%;
        opacity: 0;
    }
}

@keyframes fs {
    0% {
        background-position: 50% 150%;
    }

    50% {
        background-position: 50% -132%;
    }

    100% {
        background-position: 50% -264%;
        opacity: 0;
    }
}

@-webkit-keyframes bgshadow {

    0%,
    100% {
        -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        -webkit-box-shadow: 0 0 30em white;
        box-shadow: 0 0 30em white;
    }
}

@-moz-keyframes bgshadow {

    0%,
    100% {
        -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        -moz-box-shadow: 0 0 30em white;
        box-shadow: 0 0 30em white;
    }
}

@-o-keyframes bgshadow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 0 0 30em white;
    }
}

@keyframes bgshadow {

    0%,
    100% {
        -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        -webkit-box-shadow: 0 0 30em white;
        -moz-box-shadow: 0 0 30em white;
        box-shadow: 0 0 30em white;
    }
}


@-webkit-keyframes sz {
    0% {
        height: 0;
    }

    100% {
        height: 70%;
    }
}

@-moz-keyframes sz {
    0% {
        height: 0;
    }

    100% {
        height: 70%;
    }
}

@-o-keyframes sz {
    0% {
        height: 0;
    }

    100% {
        height: 70%;
    }
}

@keyframes sz {
    0% {
        height: 0;
    }

    100% {
        height: 70%;
    }
}
</style>
